<template>
  <el-dialog title="报修详情" :visible.sync="info.show" width="1000px" center>
    <div class="dialog-content">
      <div class="info">
        <div class="info-l">
          <p>
            站点名称：<span>{{
              info.rowData.machine_name &&
                info.rowData.machine_name.split(",")[1]
            }}</span>
          </p>
          <p>
            所属商户号：<span>{{ info.rowData.bussinessNo }}</span>
          </p>
          <p>
            所在设备号：<span>{{ info.rowData.wash_Machine_Id }}</span>
          </p>
          <p>
            报修数：<span>{{ info.rowData.repairCount }}</span>
          </p>
        </div>
        <div class="info-r" v-if="info.rowData.repairBussInfo">
          <p>所属关系：</p>
          <div>
            <p>
              合伙人：<span>{{
                info.rowData.repairBussInfo.togertherName
              }}</span>
            </p>
            <p>
              基建方：<span>{{ info.rowData.repairBussInfo.baseName }}</span>
            </p>
            <p>
              场地方：<span>{{ info.rowData.repairBussInfo.placeName }}</span>
            </p>
            <p>
              总设备方：<span>{{
                info.rowData.repairBussInfo.equipmentName
              }}</span>
            </p>
            <p>
              子设备方：<span>{{
                info.rowData.repairBussInfo.childEquipmentName
              }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="table" v-if="info.rowData.repairUserList">
        <el-table
          border
          :data="info.rowData.repairUserList"
          height="400"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="userName" label="用户"> </el-table-column>
          <el-table-column prop="water_Gun_Description" label="水枪">
          </el-table-column>
          <el-table-column prop="bubble_Description" label="泡沫枪">
          </el-table-column>
          <el-table-column prop="cleaner_Description" label="吸尘器">
          </el-table-column>
          <el-table-column prop="machine_Description" label="主机">
          </el-table-column>
          <el-table-column label="图片" width="150">
            <template slot-scope="scope">
              <div class="img-wrap">
                <el-image
                  style="width: 50px; height: 50px"
                  v-for="(i, index) in scope.row.repairImgList"
                  :key="index"
                  :src="i"
                  :preview-src-list="[i]"
                >
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="报修时间">
            <template slot-scope="scope">
              {{ scope.row.addtime | filterTime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="fault_Description"
            label="备注"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-content {
  .info {
    display: flex;
    justify-content: space-around;
    line-height: 30px;
    .info-l {
      padding: 5px 10px;
    }
    .info-r {
      display: flex;
      & > p {
        padding: 5px 0;
      }
      & > div {
        width: 400px;
        border: 1px solid #ccc;
        padding: 5px 10px;
      }
    }
  }
  .table {
    margin-top: 20px;
  }
}
</style>
